<template>
  <div>
    <el-table :data="exitGoods" style="width: 100%">
      <el-table-column prop="name" label="商品" width="">
        <template slot-scope="scope">
          <div class="img-wrapper">
            <div class="avatar">
              <el-avatar :size="50" :src="scope.row.img_show" />
            </div>
            <div class="name">
              <span>{{ scope.row.name }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="kind_name" label="分类" width="" />

      <el-table-column prop="price" label="价格" width="">
        <template slot-scope="scope">
          <span @click="storesClick(scope.row.name)">{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="inventory" label="库存" width="" />
      <el-table-column prop="sales_number" label="销量" width="" />
      <el-table-column prop="sales" label="总销售额" />
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    exitGoods: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .edit {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .delete {
    color: #f56c6c;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell{
  &:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-avatar{
    margin-right: 15px;
  }
}
.img-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  .name{
    flex: 1;
    span{
      display: inline-block;
      width: 100%;
    }
  }
}
</style>
